<template>
    <el-descriptions title="默认机器人选择">
        <el-descriptions-item>
            <el-select v-model="robotValue">
                <template #label="{ label, value }">
                    <div class="rbtinfo-style">
                        <!-- 左侧机器人图标 -->
                        <el-image :src="label.robotAvatar" class="my-image"></el-image>
                        <div class="name-info name-label">
                            <div class="rbtname">{{ label.robotName }}</div>
                        </div>
                    </div>
                </template>
                <el-option v-for="item in robots" :value="item.value" :label="item.label" :key="item.value">
                    <!-- 左右布局 -->
                    <div class="rbtinfo-style">
                        <!-- 左侧机器人图标 -->
                        <el-image :src="item.label.robotAvatar" class="my-image"></el-image>
                        <!-- 右侧机器人名称与简介 -->
                        <div class="name-info">
                            <div class="rbtname">{{ item.label.robotName }}</div>
                            <div class="rbtintro">{{ item.label.robotIntro }}</div>
                        </div>
                    </div>
                </el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup>
import { ref } from "vue"

const robotValue = ref('1')
const load = () => {
    robots.push(
        {
            value: '13',
            label: {
                robotName: 'gpt4',
                robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
            }

        },
    )
}
const robots = [
    {
        value: '1',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '2',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '3',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '4',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '5',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '6',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '7',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '8',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '9',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '10',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '11',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
    {
        value: '12',
        label: {
            robotName: '中医针灸大模型',
            robotAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            robotIntro: '东北大学研制的中医针灸大模型反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀反反复复烦烦烦烦烦烦烦烦烦额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦方法',
        }

    },
]
</script>

<style lang="scss" scoped>
.rbtinfo-style {
    display: flex;
    gap: 0.5rem;
    row-gap: 0.5rem;
    align-items: center;

    .my-image {
        width: 1.5rem;
        height: 1.5rem;
    }

    .name-info {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.2rem;
        row-gap: 0.2rem;

        .rbtname {
            line-height: 0.9rem;
            font-size: 0.9rem;
            font-weight: 550;
        }

        .rbtintro {
            line-height: 0.7rem;
            font-size: 0.7rem;
            width: 40vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #999;
        }

    }

    .name-label {
        justify-content: center;
    }
}
</style>
